<template>
  <div class="house_rend">
    <van-nav-bar
      title="房屋管理"
      left-arrow
      @click-left="$router.go(-1)"
      class="houseGuage"
    />
    <!-- 未有房源发布的情况 -->
    <div v-if="!houseListMessage.length">
      <van-image
        width="60%"
        :src="require('../../assets/image/no_house.png')"
        class="van_image_rent"
      />
      <p class="house_rend_p">
        您还没有房源去<span @click="$router.push('/rend')">发布房源</span>吧
      </p>
    </div>
    <div v-else>
      <house-list :houseList="houseListMessage"></house-list>
    </div>
  </div>
</template>

<script>
import { userHousesGuanageAPI } from "@/api";
import houseList from "@/components/houseList";
export default {
  name: "rentGuanage",
  data() {
    return {
      houseListMessage: [],
    };
  },
  components: { houseList },
  created() {
    this.getHouseList();
  },
  methods: {
    async getHouseList() {
      const { data } = await userHousesGuanageAPI();
      this.houseListMessage = data.body;
      console.log(this.houseListMessage);
    },
  },
};
</script>

<style lang="less" scoped>
.house_rend {
  :deep(.houseGuage) {
    background-color: #21b97a;
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
  :deep(.van_image_rent) {
    margin: 0 auto;
    display: flex;
  }
  .house_rend_p {
    text-align: center;
    span {
      color: #21b97a;
    }
  }
}
</style>
